<template>
  <div class="about">
    <div id="containerAbout"></div>

    <div class="dialog" v-if="dialogVisible">
      <div class="title">当前点击位置：</div>
      <div class="content">
        <p>X：{{ modelData.xp }}</p>
        <p>Y：{{ modelData.yp }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three';
import "three/examples/js/controls/OrbitControls"
// 引入obj模型加载库OBJLoader.js
import "three/examples/js/loaders/OBJLoader.js"
//引入obj模型材质加载库MTLLoader.js
import "three/examples/js/loaders/MTLLoader.js"

export default {
  name: 'About',
  data() {
    return {
      dialogVisible: false,
      modelData: {
        xp: "",
        yp: ""
      }
    }
  },
  components: {},
  mounted() {
    this.Init();
  },
  methods: {
    //初始化函数
    Init() {
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      /**
       * 添加一个坐标系
       */
      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      //var axisHelper = new THREE.AxisHelper(10);
      //scene.add(axisHelper);
      /**
       * OBJ和材质文件mtl加载
       */
      var OBJLoader = new THREE.OBJLoader();//obj加载器
      var MTLLoader = new THREE.MTLLoader();//材质文件加载器
      MTLLoader.load('static/model/pipeline.mtl', function (materials) {
        // 返回一个包含材质的对象MaterialCreator
        //console.log(materials);
        //obj的模型会和MaterialCreator包含的材质对应起来
        OBJLoader.setMaterials(materials);
        OBJLoader.load('static/model/pipeline.obj', function (obj) {
          scene.add(obj);//返回的组对象插入场景中
          //obj.scale.set(10, 10, 10); //放大obj组对象
          obj.position.set(-100, 175, 200); //模型位置
        })
      })
      //加载另一个模型
      MTLLoader.load('static/model/axle.mtl', function (materials) {
        // 返回一个包含材质的对象MaterialCreator
        //console.log(materials);
        //obj的模型会和MaterialCreator包含的材质对应起来
        OBJLoader.setMaterials(materials);
        OBJLoader.load('static/model/axle.obj', function (obj) {
          scene.add(obj);//返回的组对象插入场景中
          obj.position.set(-100, 175, 200); //模型位置
        })
      })
      /**
       * 光源设置
       */
          //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      /**
       * 相机设置
       */
      let container = document.getElementById("containerAbout");
      var width = 1920; //窗口宽度
      var height = 937; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 18; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(-100, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);//设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      container.appendChild(renderer.domElement); //body元素中插入canvas对象
      //自定义渲染 --- 均匀旋转
      let T0 = new Date();//上次时间
      function render() {
        let T1 = new Date();//本次时间
        let t = T1 - T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene, camera);//执行渲染操作
      }

      render();
      // 鼠标操作3D模型
      var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
      window.addEventListener('click', this.onMouseClick);
    },
    //模型点击事件
    onMouseClick(e) {
      console.log("模型点击事件：", e)
      this.dialogVisible = !this.dialogVisible;
      this.modelData.xp = e.clientX;
      this.modelData.yp = e.clientY;
    },
    closeBtn() {

    }
  }
}
</script>
<style lang="scss" scoped>
.dialog {
  width: 200px;
  height: 200px;
  background: #b8b9ba;
  position: absolute;
  top: 10%;
  left: 40%;

  .title {
    width: 200px;
    height: 50px;
    background: #0099ff;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
